<template>
	<view class="user-space">
		<!-- 用户信息 -->
		<view class="user-space__userInfo u-f-ac u-f-juc" :style="{background: `url(${userInfo.userpic})`}">
			<image :src="userInfo.userpic" mode="aspectFill" />
			<view class="user-space__userInfo__main u-f-ac u-f-juc">
				<text class="user-space__userInfo__main--username">{{userInfo.username}}</text>
				<tag-sex-age :sex="userInfo.sex" :age="userInfo.age" style="border: 2upx solid white;" />
			</view>
			<view class="user-space__userInfo--guanzhu u-f-ac u-f-juc" v-show="!userInfo.isguanzhu">
				<text class="icon iconfont icon-tianjia1"></text>
				<text>关注</text>
			</view>
		</view>
		<!-- 赞数 -->
		<view class="user-space__userspace u-f-ac">
			<view v-for="item,index in spacedata" :key="index">
				<text>{{item.num}}</text>
				<text>{{item.name}}</text>
			</view>

		</view>
		<!-- 切换栏 -->
		<swiperTabHead ref="swiperTabHeadRef" :tabBars="tabBars" v-model:tabBarsIndex="tabBarsIndex"
			:itemStyle="{width:'33.3%',margin:'0','text-align': 'center','font-weight':'bold'}" />

		<swiper class="swiper-box" :style="{height:swiperHeight+'px',}" :current="tabBarsIndex" @change="tabChange">
			<swiper-item class="swiper-item" v-for="(item,index) of tabBars" :key="index">
				<template v-if="index==0">
					<!-- 主页 -->
					<userSpaceUserInfo :item="userInfo" />
				</template>

				<template v-else-if="index==1">
					<scroll-view  style="height: 100%;" :scroll-y="true" @scrolltolower="loadingScroll(index)">
					<template v-if="commList.list.length>0">
						<commonList v-for="item2,index in commList.list" :key="index" :item="item2" />
						<loadMore :loadingText="commList.loadingText" />
					</template>
					<template v-else>
						<noThing />
					</template>
					</scroll-view>
				</template>

				<template v-else-if="index==2">
					<scroll-view  style="height: 100%;" :scroll-y="true" @scrolltolower="loadingScroll(index)">
					<template v-if="commList.list.length>0">
						<commonList v-for="item2,index in commList.list" :key="index" :item="item2" />
						<loadMore :loadingText="commList.loadingText" />
					</template>
					<template v-else>
						<noThing />
					</template>
					</scroll-view>
				</template>

			</swiper-item>

		</swiper>
		<!-- 菜单 -->
		<userspackepoup 
			v-model:show="show"
			@lahei="lahei" 
			@beizhu="beizhu"/>
	</view>
</template>

<script setup>
	import tagSexAge from '../../component/common/tag-sex-age.vue';
	import userSpaceUserInfo from '../../component/user-space/user-space-userInfo.vue'
	import swiperTabHead from '../../component/index/swiper-tab-head.vue';
	import loadMore from '../../component/common/load-more.vue';
	import commonList from '../../component/common/comm-list.vue';
	import noThing from '../../component/common/no-thing/no-thing.vue';
	import userspackepoup from '../../component/user-space/user-space-popup.vue';
	import {onPullDownRefresh,onReachBottom,onNavigationBarButtonTap} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {getPostByUserIdApi} from '../../api/postApi.js';

	const tabBars = ref([{
		classname: '主页',
		id: 'zhuye'
		}, {
			classname: '糗事',
			id: 'qiushi'
		}, {
			classname	: '动态',
			id: 'dontai'
		}])

	const swiperTabHeadRef = ref()
	const tabBarsIndex = ref(0)
	const swiperHeight = ref(500)

	const commList = ref({
		loadingText: "上拉加载更多",
		page:1,
		list: [{
				userpic: "./static/logo.png", //头像
				username: "nics", //昵称
				isguanzhu: false, //是否关注
				title: "标题asds",
				type: "img", //img 图文  video 视频
				titlepic: "./static/logo.png", //标题图片
				playnum: "20w", //播放量
				long: "2:47", //播放时长
				sex: 0,
				age: 20,
				morepic: ['./static/logo.png', './static/logo.png'],
				infonum: {
					index: 0, //0没有操作 1 顶 2 踩
					dingnum: 11,
					cainum: 11,
				},
				commentnum: 10, // 评论
				sharenum: 10, //转发
			},
			{
				userpic: "./static/logo.png", //头像
				username: "nics", //昵称
				isguanzhu: false, //是否关注
				title: "标题asds",
				type: "img", //img 图文  video 视频
				titlepic: "./static/logo.png", //标题图片
				playnum: "20w", //播放量
				long: "2:47", //播放时长
				sex: 0,
				age: 20,
				morepic: ['./static/logo.png', './static/logo.png'],
				infonum: {
					index: 0, //0没有操作 1 顶 2 踩
					dingnum: 11,
					cainum: 11,
				},
				commentnum: 10, // 评论
				sharenum: 10, //转发
			},
			{
				userpic: "./static/logo.png", //头像
				username: "nics", //昵称
				isguanzhu: false, //是否关注
				title: "标题asds",
				type: "img", //img 图文  video 视频
				titlepic: "./static/logo.png", //标题图片
				playnum: "20w", //播放量
				long: "2:47", //播放时长
				sex: 0,
				age: 20,
				morepic: ['./static/logo.png', './static/logo.png'],
				infonum: {
					index: 0, //0没有操作 1 顶 2 踩
					dingnum: 11,
					cainum: 11,
				},
				commentnum: 10, // 评论
				sharenum: 10, //转发
			},
			{
				userpic: "./static/logo.png", //头像
				username: "nics", //昵称
				isguanzhu: false, //是否关注
				title: "标题asds",
				type: "img", //img 图文  video 视频
				titlepic: "./static/logo.png", //标题图片
				playnum: "20w", //播放量
				long: "2:47", //播放时长
				sex: 0,
				age: 20,
				morepic: ['./static/logo.png', './static/logo.png'],
				infonum: {
					index: 0, //0没有操作 1 顶 2 踩
					dingnum: 11,
					cainum: 11,
				},
				commentnum: 10, // 评论
				sharenum: 10, //转发
			}
		]
	})

	const show = ref(false);

	const userInfo = reactive({
		username: "昵称",
		userpic: "../../static/datapic/3.jpg",
		sex: 1,
		age: 20,
		isguanzhu: false,
		regtime: '2019-04-11',
		id: 123,
		birthday: '1987-02-03',
		job: "IT",
		path: "广东湛江",
		qg: "已婚",
	})

	const spacedata = ref([{
			name: "获赞",
			num: "10k"
		},
		{
			name: "关注",
			num: "11"
		},
		{
			name: "粉丝",
			num: "12"
		}
	])

	function loadingScroll(index){
		// 判断如果加载状态不等于加载更多
		if(commList.value.loadingText!="上拉加载更多")return;
		commList.value.loadingText="加载中...";
		setTimeout(()=>{
			let obj = {
					userpic: "./static/logo.png", //头像
					username: "nics", //昵称
					isguanzhu: false, //是否关注
					title: "标题asds",
					sex:0,
					age:21,
					type: "text", //img 图文  video 视频
					titlepic: "你好", //标题图片
					playnum: "20w", //播放量
					long: "2:47", //播放时长
					infonum: {
						index: 0, //0没有操作 1 顶 2 踩
						dingnum: 11,
						cainum: 11,
					},
					commentnum: 10, // 评论
					sharenum: 10, //转发
				};
			commList.value.list.push(obj);
			commList.value.loadingText="上拉加载更多";
		},1000)
	}


	function tabChange(e) {
		tabBarsIndex.value = e.detail.current;
		swiperTabHeadRef.value.switchTabbar(null, tabBarsIndex.value)
	}

	onMounted(() => {
		swiperHeight.value = uni.getWindowInfo().windowHeight;
		swiperTabHeadRef.value.switchTabbar(null, tabBarsIndex.value)
		getPostByUserIdApi(userInfo.id,commList.vlaue.page).then(res=>{
			commList.value.list.push(...res)
		})
	})
	
	onNavigationBarButtonTap((e)=>{
		console.log(e.index)
		if(e.index==0){
			show.value=!show.value;
		}
	})
	
	function lahei(){
		
	}
	
	function beizhu(){
		
	}
	
</script>

<style scoped lang="scss">
	.user-space {
		background-color: #f4f4f4;

		height: 100%;

		&__userInfo {
			flex-direction: column;

			>image {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				margin: 150upx 0 30upx;
				filter: blur(10upx);

			}

			&__main {
				&--username {
					color: white;
					font-weight: bold;
					font-size: "楷体";
					margin: 16upx 10upx;

				}
			}

			&--guanzhu {
				padding: 10upx 20upx;
				background-color: #ffe933;
				border-radius: 8upx;
				margin: 16upx 0 60upx;
			}
		}

		&__userspace {
			justify-content: space-evenly;
			padding: 30upx 0upx;
			background-color: #FFFFFF;
			margin-top: -10upx;
			margin-bottom: 30upx;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;

			>view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>text {
					&:first-of-type {
						font-size: 30upx;
						font-weight: bold;
					}

					&:last-of-type {
						color: #bababa;
						font-size: 32upx;
						font-weight: bold;
					}
				}
			}
		}


	}
</style>